<!--
 * @Author: your name
 * @Date: 2021-08-18 15:11:11
 * @LastEditTime: 2023-06-15 14:25:54
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \cscec-pms-admin\src\components\BaseIframe\index.vue
-->
<template>
  <a-spin ref="box" :spinning="loading" class="base-iframe">
    <iframe
      ref="iframe"
      class="iframe"
      :id="idName"
      :src="iframeUrl"
      allowfullscreen="true"
      webkitallowfullscreen="true"
      mozallowfullscreen="true"
      oallowfullscreen="true"
      msallowfullscreen="true"
    />
  </a-spin>
</template>
<script>
import Vue from 'vue'
import $ from 'jquery'
import { mapGetters } from 'vuex'
export default {
  name: 'BaseIframe',
  props: {
    hostUrl: {
      type: String,
      default: () => 'https://build.cscecxn.com:4443'
    },
    src: {
      type: String,
      default: 'index/MoProject'
    },
    srcLong: {
      type: String,
      default: null
    },
    height: {
      type: String,
      default: `${document.body.clientHeight - 145}px`
    },
    preToken: {
      type: String,
      default: '?token'
    },
    isSetCookie: {
      type: Boolean,
      default: false
    },
    scale: {
      type: Boolean,
      default: false
    },
    // 链接额外参数
    extraAttrs: {
      type: String,
      default: () => ''
    },
    // 当前页面是否激活
    isCurrent: {
      type: Boolean,
      default: ()=> false
    },
    needFgs: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    // setScale(iframe) {
    //   if (this.scale) {
    //     const iframeDefWidth = this.$refs.box?.$el.clientWidth //iframe默认宽度
    //     const iframeDefHeight = this.$refs.box?.$el.clientHeight //iframe默认高度
    //     console.log(iframeDefWidth, iframeDefHeight)
    //     const iframeWidth = 1920
    //     iframe.style.width = iframeWidth + 'px'
    //     let scaleX = iframeDefWidth / iframeWidth //缩放比例
    //     iframe.style.height = iframeDefHeight / scaleX + 'px'
    //     // let scaleY = iframeDefHeight / iframeHeight //缩放比例
    //     let translateX = -((iframeWidth - iframeDefWidth) / 2) / scaleX + 'px' //计算平移距离
    //     let translateY = -((iframeDefHeight / scaleX - iframeDefHeight) / 2) / scaleX + 'px' //计算平移距离
    //     iframe.style.transform = `scale(${scaleX}) translate(${translateX},${translateY})`
    //     // const bottom = -(iframeHeight - iframeDefHeight) / 2 / this.initScale / this.initScale + 'px'
    //     // iframe.style.marginBottom = `${bottom}` //处理缩放后造成的下边距过长
    //   }
    // },
    setCookie(cname, cvalue, exdays) {
      const d = new Date()
      d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000)
      const expires = 'expires=' + d.toUTCString()
      console.log(document.domain)
      console.log(cname + '=' + cvalue + ';' + expires + ';path=/;domain=.rabbitpre.com')
      return (document.cookie = cname + '=' + cvalue + ';' + expires + ';path=/;domain=' + document.domain)
    },
    getCookie() {
      if (this.isSetCookie) {
        $.ajax({
          type: 'POST',
          url: 'http://192.168.128.14:8080/sdata/rest/sso/authority/login?token=' + this.token,
          data: {},
          success: function (res) {
            this.setCookie('token', res.result, 1)
          },
          dataType: 'json',
          error: function (msg) {}
        })
      }
    },
    msgListener() {
      window.addEventListener('message', (e) => {
        //token失效退出
        if (e.data?.isExpired) {
          Vue.getAcloudProvider().logout()
        }
        // 跳转路由
        if (e.data.navigator) {
          let config = {
            path: e.data.navigator.path
          }
          if (e.data.navigator?.params) {
            config.query = e.data.navigator.params
          }
          this.$router.push(config)
        }
        e.data.isClose === this.$route.path && this.$multiTab.closeIframe(this.$route.path)
      })
    }
  },
  beforeDestroy() {
    // if (this.scale) {
    //   window.removeEventListener('resize', () => {
    //     this.setScale(document.getElementById(this.idName))
    //   })
    //   this.$bus.$off('switchSecondaryMenu', () => {
    //     this.setScale(document.getElementById(this.idName))
    //   })
    // }
    window.removeEventListener('message', (e) => {
      //token失效退出
      if (e.data?.isExpired) {
        Vue.getAcloudProvider().logout()
      }
      // 跳转路由
      if (e.data.navigator) {
        let config = {
          path: e.data.navigator.path
        }
        if (e.data.navigator?.params) {
          config.query = e.data.navigator.params
        }
        this.$router.push(config)
      }
      if(e.data.isClose){
        console.log(e)
        e.data.isClose && this.$close()
      }
    })
  },
  created() {
    this.idName = 'iframe' + Date.now()
  },
  computed: {
    ...mapGetters(['GET_REDRESS_PERCENTAGE']),
    iframeUrl() {
      if(this.needFgs) {
        return this.srcLong != null ? this.srcLong : `${this.hostUrl + this.src + this.preToken}=${this.token}&fgs=${this.$store.state.user.fgs}${this.extraAttrs}`
      } else {
        return this.srcLong != null ? this.srcLong : `${this.hostUrl + this.src + this.preToken}=${this.token}`
      }

    }
  },
  mounted() {
    var _this = this
    _this.loading = true
    let iframe = document.getElementById(_this.idName)
    // _this.iframeHeight = `${document.body.clientHeight - 145}px`
    // if (_this.scale) {
    //   // _this.initScale = this.$refs.box?.$el.clientWidth / 1920
    //   // 根据窗口大小设置iframe高度
    //   window.addEventListener('resize', () => {
    //     _this.setScale(iframe)
    //   })
    //   this.$bus.$on('switchSecondaryMenu', () => {
    //     setTimeout(() => {
    //       this.setScale(iframe)
    //     }, 300)
    //   })
    // }
    // _this.setScale(iframe)
    _this.msgListener()
    // 处理兼容行问题
    if (iframe.attachEvent) {
      iframe.attachEvent('onload', function () {
        _this.loading = false
        _this.getCookie(iframe)
      })
    } else {
      iframe.onload = function () {
        _this.loading = false
        _this.getCookie(iframe)
      }
    }
  },

  data() {
    return {
      idName: '',
      token: Vue.getAcloudProvider().getAccessToken(),
      loading: false,
      // style: 'height: calc('+this.GET_REDRESS_PERCENTAGE+'vh - 140px); background: #fff; overflow: hidden',
      // iframeHeight: this.height || `${document.body.clientHeight - 145}px`
    }
  }
}
</script>
<style lang="less" type="text/less" scoped>
@deep: ~'>>>';
.base-iframe{
  height: 100%;
  @{deep} .ant-spin-container{
    height: 100%;
    >iframe{
      display: block;
      height: 100%;
    }
  }
}
.iframe {
  width: 100%;
  height: 100%;
  border: none;
}
</style>
